<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>度分秒计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .input-group {
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .input-group input, .input-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .button-group {
            margin-top: 20px;
        }
        .button-group button {
            padding: 10px 20px;
            margin-right: 10px;
            cursor: pointer;
        }
        .result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>度分秒计算器</h1>
        <div class="input-group">
            <label>角度1 (度 分 秒):</label>
            <input type="number" id="deg1" placeholder="度">
            <input type="number" id="min1" placeholder="分">
            <input type="number" id="sec1" placeholder="秒">
        </div>
        <div class="input-group">
            <label>角度2 (度 分 秒):</label>
            <input type="number" id="deg2" placeholder="度">
            <input type="number" id="min2" placeholder="分">
            <input type="number" id="sec2" placeholder="秒">
        </div>
        <div class="input-group">
            <label>长度 L:</label>
            <input type="number" id="length" placeholder="输入长度">
        </div>
        <div class="input-group">
            <label>选择操作:</label>
            <select id="operation">
                <option value="cos">cos</option>
                <option value="sin">sin</option>
                <option value="asin">asin</option>
                <option value="acos">acos</option>
                <option value="atan">atan</option>
            </select>
        </div>
        <div class="button-group">
            <button onclick="addDMS()">相加</button>
            <button onclick="subtractDMS()">相减</button>
            <button onclick="calculateTrig()">计算三角函数</button>
            <button onclick="calculateInverseTrig()">计算反三角函数</button>
            <button onclick="multiplyLength()">长度 × cos/sin</button>
        </div>
        <div class="result" id="result"></div>
    </div>

    <script>
        function dmsToDecimal(degrees, minutes, seconds) {
            return degrees + minutes / 60 + seconds / 3600;
        }

        function decimalToDMS(decimal) {
            const degrees = Math.floor(decimal);
            const remaining = decimal - degrees;
            const minutes = Math.floor(remaining * 60);
            const seconds = (remaining * 60 - minutes) * 60;
            return { degrees, minutes, seconds };
        }

        function addDMS() {
            const deg1 = parseFloat(document.getElementById('deg1').value) || 0;
            const min1 = parseFloat(document.getElementById('min1').value) || 0;
            const sec1 = parseFloat(document.getElementById('sec1').value) || 0;
            const deg2 = parseFloat(document.getElementById('deg2').value) || 0;
            const min2 = parseFloat(document.getElementById('min2').value) || 0;
            const sec2 = parseFloat(document.getElementById('sec2').value) || 0;

            const decimal1 = dmsToDecimal(deg1, min1, sec1);
            const decimal2 = dmsToDecimal(deg2, min2, sec2);
            const total = decimal1 + decimal2;
            const result = decimalToDMS(total);

            document.getElementById('result').innerHTML = `相加结果: ${result.degrees}° ${result.minutes}' ${result.seconds.toFixed(2)}"`;
        }

        function subtractDMS() {
            const deg1 = parseFloat(document.getElementById('deg1').value) || 0;
            const min1 = parseFloat(document.getElementById('min1').value) || 0;
            const sec1 = parseFloat(document.getElementById('sec1').value) || 0;
            const deg2 = parseFloat(document.getElementById('deg2').value) || 0;
            const min2 = parseFloat(document.getElementById('min2').value) || 0;
            const sec2 = parseFloat(document.getElementById('sec2').value) || 0;

            const decimal1 = dmsToDecimal(deg1, min1, sec1);
            const decimal2 = dmsToDecimal(deg2, min2, sec2);
            const difference = decimal1 - decimal2;
            const result = decimalToDMS(difference);

            document.getElementById('result').innerHTML = `相减结果: ${result.degrees}° ${result.minutes}' ${result.seconds.toFixed(2)}"`;
        }

        function calculateTrig() {
            const deg1 = parseFloat(document.getElementById('deg1').value) || 0;
            const min1 = parseFloat(document.getElementById('min1').value) || 0;
            const sec1 = parseFloat(document.getElementById('sec1').value) || 0;

            const decimal = dmsToDecimal(deg1, min1, sec1);
            const radians = (decimal * Math.PI) / 180;
            const sinVal = Math.sin(radians);
            const cosVal = Math.cos(radians);
            const tanVal = Math.tan(radians);

            document.getElementById('result').innerHTML = `sin: ${sinVal.toFixed(4)}, cos: ${cosVal.toFixed(4)}, tan: ${tanVal.toFixed(4)}`;
        }

        function calculateInverseTrig() {
            const value = parseFloat(prompt("请输入一个值（-1 到 1 之间）:"));
            if (isNaN(value) || value < -1 || value > 1) {
                alert("输入的值必须在 -1 到 1 之间！");
                return;
            }

            const operation = document.getElementById('operation').value;
            let radians;
            if (operation === 'asin') {
                radians = Math.asin(value);
            } else if (operation === 'acos') {
                radians = Math.acos(value);
            } else if (operation === 'atan') {
                radians = Math.atan(value);
            } else {
                alert("请选择反三角函数操作！");
                return;
            }

            const degrees = (radians * 180) / Math.PI;
            const result = decimalToDMS(degrees);
            document.getElementById('result').innerHTML = `${operation}(${value}) 的度分秒表示: ${result.degrees}° ${result.minutes}' ${result.seconds.toFixed(2)}"`;
        }

        function multiplyLength() {
            const deg1 = parseFloat(document.getElementById('deg1').value) || 0;
            const min1 = parseFloat(document.getElementById('min1').value) || 0;
            const sec1 = parseFloat(document.getElementById('sec1').value) || 0;
            const length = parseFloat(document.getElementById('length').value);

            if (isNaN(length)) {
                alert("请输入有效的长度值！");
                return;
            }

            const decimal = dmsToDecimal(deg1, min1, sec1);
            const radians = (decimal * Math.PI) / 180;
            const operation = document.getElementById('operation').value;

            let result;
            if (operation === 'cos') {
                result = length * Math.cos(radians);
            } else if (operation === 'sin') {
                result = length * Math.sin(radians);
            } else {
                alert("请选择 cos 或 sin 操作！");
                return;
            }

            document.getElementById('result').innerHTML = `长度 × ${operation}: ${result.toFixed(4)}`;
        }
    </script>
</body>
</html>